<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dom</title>
	<style type="text/css">
		#box{
			width:200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}
		.box{
			width: 100px;
			height: 100px;
			background: green url() 0 0 no-repeat;
		}
	</style>
	<script type="text/javascript">
		
		// dom     捉元素（标签）  
		// 		加事件  
		// 		操作元素（标签：属性，样式，子元素）
		//window 加载完再捉元素
		window.onload= function () {

			// box = document.getElementById('box');


			// box.style.background = "blue";

			// console.log(box);
			// 
			// box = document.getElementsByClassName('box');

			// box[1].style.background='blue';


			// box = document.getElementsByTagName('div');

			// box[0].style.width ="300px";
			// 
			// 

			box = document.getElementById('box');

			box.onmouseover = function () {
				alert('我进来了')
			}

			box.onclick = function () {
				alert('我被点了')
			}

			box.ondblclick = function () {
				alert('我被双点了')
			}

			box.onmouseout = function () {
				alert('我走了')
			}


			btn = document.getElementById('btn');


			btn.onchange= function () {
				alert(888);
			}

			btn.onfocus= function () {
				box.style.background= "yellow";
			}

			btn.onblur= function () {
				box.style.background= "red";
			}
		}

	</script>

</head>
<body>
	<div id="box"></div>

	<div class="box"></div>

	<div class="box"></div>

	<input type="text"  id= "btn" name="">

</body>
</html>